<script setup>
import { Handle, Position, useVueFlow } from '@vue-flow/core';
import { NodeToolbar } from '@vue-flow/node-toolbar';
import Icon from '../icon/NodeIcon.vue';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
  },
})

const { removeNodes, updateNodeData } = useVueFlow()

function onSelect(color) {
  updateNodeData(props.id, { color, isGradient: false })
}

function onGradient() {
  updateNodeData(props.id, { isGradient: true })
}

const dataRef = ref(props.data)

const styleRef = ref(dataRef.value.style || {})

const handleLeft = ref(styleRef.value.handles.left.show)
const handleRight = ref(styleRef.value.handles.right.show)
const handleTop = ref(styleRef.value.handles.top.show)
const handleBottom = ref(styleRef.value.handles.bottom.show)
const handleLeftType = ref(styleRef.value.handles.left.type)
const handleRightType = ref(styleRef.value.handles.right.type)
const handleTopType = ref(styleRef.value.handles.top.type)
const handleBottomType = ref(styleRef.value.handles.bottom.type)

watch(handleLeft, val => {  
  updateNodeData(props.id, dataRef.value)
})

const radioName1 = ref(getId())
const radioName2 = ref(getId())
const radioName3 = ref(getId())
const radioName4 = ref(getId())
function getId() {
  return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
      v = c == 'x' ? r : (r & 0x3 | 0x8)
    
    return v.toString(16)
  })
}
</script>

<template>
  <NodeToolbar
    style="display: flex; align-items: center; gap: 0.5rem"
    :is-visible="data.toolbarVisible"
    :position="data.toolbarPosition"
  >
    <div @click.stop.prevent="() => removeNodes(props.id)">
      <Icon
        name="node_close"
        style="position: absolute;inset-inline-end: 10px;"
      />
    </div>
    
  </NodeToolbar>

  <div class="node-boolean-div">
    <VsRow>
      <VsCol
        vs-type="flex"
        vs-justify="center"
        vs-align="center"
        vs-w="12"
      >
        <Icon
          name="boolean"
          style="block-size: 24px;inline-size: 24px;"
        />
        &nbsp;
        {{ dataRef.name }}
      </VsCol>
    </VsRow>

    <VsCollapse type="margin">
      <VsCollapseItem>
        <template #header>
          <div>
            样式配置
          </div>
        </template>
        <VsRow>
          <VsCol
            vs-type="flex"
            vs-justify="left"
            vs-align="center"
            vs-w="12"
          >
            <VsCheckbox v-model="handleLeft">
              左连接点
            </VsCheckbox>
            <VsRadio
              v-model="handleLeftType"
              :vs-name="radioName1"
              vs-value="source"
            >
              source
            </VsRadio>
            <VsRadio
              v-model="handleLeftType"
              :vs-name="radioName1"
              vs-value="target"
            >
              target
            </VsRadio>
          </VsCol>
          <VsCol
            vs-type="flex"
            vs-justify="left"
            vs-align="center"
            vs-w="12"
          >
            <VsCheckbox v-model="handleRight">
              右连接点
            </VsCheckbox>
            <VsRadio
              v-model="handleRightType"
              :vs-name="radioName2"
              vs-value="source"
            >
              source
            </VsRadio>
            <VsRadio
              v-model="handleRightType"
              :vs-name="radioName2"
              vs-value="target"
            >
              target
            </VsRadio>
          </VsCol>
          <VsCol
            vs-type="flex"
            vs-justify="left"
            vs-align="center"
            vs-w="12"
          >
            <VsCheckbox v-model="handleTop">
              上连接点
            </VsCheckbox>
            <VsRadio
              v-model="handleTopType"
              :vs-name="radioName3"
              vs-value="source"
            >
              source
            </VsRadio>
            <VsRadio
              v-model="handleTopType"
              :vs-name="radioName3"
              vs-value="target"
            >
              target
            </VsRadio>
          </VsCol>
          <VsCol
            vs-type="flex"
            vs-justify="left"
            vs-align="center"
            vs-w="12"
          >
            <VsCheckbox v-model="handleBottom">
              下连接点
            </VsCheckbox>
            <VsRadio
              v-model="handleBottomType"
              :vs-name="radioName4"
              vs-value="source"
            >
              source
            </VsRadio>
            <VsRadio
              v-model="handleBottomType"
              :vs-name="radioName4"
              vs-value="target"
            >
              target
            </VsRadio>
          </VsCol>
        </VsRow>
      </VsCollapseItem>
      <VsCollapseItem>
        <template #header>
          <div>
            属性配置
          </div>
        </template>
        <VsInput
          v-model="dataRef.id"
          class="w-100 mt-6"
          label-placeholder="组件ID"
        />
        <VsInput
          v-model="dataRef.name"
          class="w-100 mt-6"
          label-placeholder="组件名称"
        />
      </VsCollapseItem>
    </VsCollapse>
    
    <Handle
      v-if="handleLeft"
      class="handle-boolean"
      :type="handleLeftType"
      :position="Position.Left"
    />
    <Handle
      v-if="handleRight"
      class="handle-boolean"
      :type="handleRightType"
      :position="Position.Right"
    />
    <Handle
      v-if="handleTop"
      class="handle-boolean"
      :type="handleTopType"
      :position="Position.Top"
    />
    <Handle
      v-if="handleBottom"
      class="handle-boolean"
      :type="handleBottomType"
      :position="Position.Bottom"
    />
  </div>
</template>

<style>
.icon-node-close{
  cursor: pointer;
}

.custom-node-flow .vue-flow__edges{filter:invert(100%)}

.custom-node-flow .vue-flow__node-boolean{
  display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:10px;
  border:1px solid #f3f3ef;
  border-radius:10px;

  /* background:whitesmoke;border:1px solid #777; */
  background-color: #fff;
  gap:10px;
  max-inline-size:320px
}

.handle-boolean{
  background-color: #95b4fa85 !important;

  /* background-color: #e5e7eb !important; */
  block-size: 24px !important;
  inline-size: 24px !important;
}

.node-boolean-div{
  padding: 10px;
  margin: 10px;
  inline-size: 300px;
  margin-block-end: 0;
  padding-block-end: 0;
}

.custom-node-flow .vue-flow__node-boolean .boolean{
  display:flex;flex-flow:row wrap;justify-content:center;margin:auto;
  gap:4px;max-inline-size:90%}

.custom-node-flow .vue-flow__node-boolean .boolean button{
  padding:5px;border:1px solid #777;border-radius:25px;block-size:25px;
  cursor:pointer;inline-size:25px}

.custom-node-flow .vue-flow__node-boolean .boolean button:hover{
  box-shadow:0 5px 10px 0 rgba(0,0,0,50%);box-shadow:0 5px 10px #00000080;
  transform:scale(105%);transition:.25s all ease}

.animated-bg-gradient{animation:gradient 4s ease infinite;
  background:linear-gradient(122deg,#6f3381,#81c7d4,#fedfe1,#fffffb);
  background-size:800% 800%}

@keyframes gradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}

@keyframes gradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}

@keyframes gradient{0%{background-position:0% 22%}50%{background-position:100% 79%}100%{background-position:0% 22%}}
</style>
